<template>
    <div class="app">
        <div class="guess-num">猜测次数（猜测次数最多7次，必猜出你的年龄哦）：{{guessNum}}</div>
        <div class="guess-box">
            <p class="guess-title">猜测你的年龄为（年龄范围为1-100）</p>
            <div class="guess-age">{{guessAge}}</div>
            <div class="guess-bt">
                <div class="guess-bt-big" @click="toGuess('big')">大了</div>
                <div class="guess-bt-ok" @click="correct">正确</div>
                <div class="guess-bt-small" @click="toGuess('small')">小了</div>
            </div>
        </div>
        <div class="guess-reset" @click="reset">重置</div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            guessNum:0,
            guessAge:50,
            max:100, 
            min:1,
        }
    },
    methods:{
        // 点击大了小了
        toGuess(str){
            this.guessNum++
            if(this.guessNum > 7){
                alert("应该是三个按钮没点对吧")
                this.reset()
                return 
            }
            if(str == 'big'){
                this.max = this.guessAge
            }else if(str == 'small'){
                this.min = this.guessAge
            }
            this.guessAge = this.middleNum(this.min,this.max,str)
        },

        // 找出中间数字
        middleNum(min,max,str){
            if(str == 'big'){
                return Math.floor((max + min) / 2)
            }else if(str == 'small'){
                return Math.ceil((max + min) / 2)
            }
        },

        // 正确按钮
        correct(){
            alert(`真是太棒了，只用了${this.guessNum}次就猜出来了呢`)
            this.reset()

        },

        // 重置
        reset(){
            this.guessNum = 0
            this.guessAge = 50
            this.max = 100
            this.min = 1
        },

    },
}
</script>

<style lang="less" scoped>
.app{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.guess-num{
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 20px;
}
.guess-reset{
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 25px;
    text-decoration: underline;
    cursor: pointer;
}
.guess-box{
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .guess-title{
        font-size: 35px;
    }
    .guess-age{
        font-size: 50px;
        font-weight: bold;

    }
    .guess-bt{
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 20px;
        .guess-bt-big,.guess-bt-ok,.guess-bt-small{
            padding: 10px 30px;
            background-color: #2932e1;
            border-radius: 10px;
            color: white;
            cursor: pointer;
            transition:all 0.2s ease-in-out;  
        }
    }
}
.guess-bt-big:hover,.guess-bt-ok:hover,.guess-bt-small:hover{
    opacity: 0.5;
    transform: scale(1.2);
}
</style>